<template>
    <div class="login">
        <el-card class="login-card">
            <template #header>
                <div class="login-title">登录</div>
            </template>
            <el-form
                ref="formRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="70px"
                class="demo-ruleForm"
            >
                <el-form-item label="账号" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
            </el-form>
            <div class="login-actions">
                <el-button type="primary" @click="onLogin">登录</el-button>
            </div>
        </el-card>
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useUserStore } from '@/store'
import { useRouter, useRoute } from 'vue-router'
import { ElNotification } from 'element-plus'
import { deepClone } from '@/libs/tools'
export default {
    name: 'login',
    setup() {
        const userStore = useUserStore()
        const router = useRouter()
        const route = useRoute()
        
        const formRef = ref(null)
        const ruleForm = reactive({
            username: '',
            password: ''
        })

        const validateUserName = (rule, value, callback) => {
            return !value ? callback(new Error('用户名不能为空')) : true
        }
        const validatePass = (rule, value, callback) => {
            return !value ? callback(new Error('密码不能为空')) : true
        }

        const rules = reactive({
            username: [{ validator: validateUserName, trigger: 'blur' }],
            password: [{ validator: validatePass, trigger: 'blur' }]
        })

        const onLogin = () => {
            formRef.value.validate((status, data) => {
                if (status) {
                    userStore.login({
                        userName: ruleForm.username,
                        password: ruleForm.password
                    }).then(res => {
                        if (res.Status === 1) {
                            userStore.getUserInfo().then(() => {
                                ElNotification({
                                    title: '登录成功',
                                    type: 'success'
                                })
                                router.replace({
                                    name: 'myapp'
                                })
                            })
                        } else {
                            ElNotification({
                                title: '登录失败',
                                message: res.Message || '网络错误',
                                type: 'warning'
                            })
                        }
                    }).catch(error => {
                        ElNotification({
                            title: '登录失败',
                            message: error.Message || '网络错误',
                            type: 'warning'
                        })
                    })
                }
            })
        }

        return {
            formRef,
            ruleForm,
            rules,

            onLogin
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    background-color: var(--edit-color-primary-light-9);
    position: relative;
    .login-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .login-title {
            text-align: center;
            font-size: 16px;
        }
        .login-actions {
            text-align: center;
            padding-top: 20px;
        }
    }
}
</style>